<!--
分页按钮
    行内块好处
        1）父级添加text-align:center;，可以实现子元素水平居中
        2）换行符可以作为均等间距
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        margin: 100px auto;
        text-align: center;
        background-color: #e8e2e2;
    }
    .box a {
        display: inline-block;
        width: 36px;
        height: 36px;
        background-color: #ccc;
        color: #000000;
        text-decoration: none;
        border: 1px solid;
        line-height: 36px;
    }
    .box .prev,
    .box .next {
        width: 80px;
    }
    .box .current,
    .box .elp {
        border: none;
        background-color: transparent;
    }
    .box input {
        display: inline-block;
        width: 45px;
        height: 25px;
        text-align: center;
        border: 1px solid transparent;
        outline: none;
    }
    .box .btn {
        width: 80px;
    }
</style>

<div class="box">
    <a href="#" class="prev">上一页&lt;&lt;</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#" class="current">3</a>
    <a href="#">4</a>
    <a href="#" class="elp">...</a>
    <a href="#" class="next">&gt;&gt;下一页</a>
    跳转到第
    <input type="text" value="3">
    页
    <a href="#" class="btn">确定</a>
</div>